<template>
    <div class="box box12" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
        <!-- <ImmersiveNavbar title="眨眨眼" /> -->
        <div @click="goBack" class="image-1"></div>
        <img class="image" @click="btn" :src="wechat1" alt="">

    </div>
</template>
<script>
/* global plus */
export default {
    name: 'BoxEleven',
    mounted() {
        document.addEventListener('plusready', this.handleBackButton);
        // 设置沉浸式状态栏：深色文字、浅色背景
        this.setStatusBarDark()
        document.addEventListener('plusready', this.handlePlusReady)
    },
    methods: {
        handleBackButton() {
            if (typeof plus !== 'undefined' && plus.key) {
                plus.key.addEventListener('backbutton', () => {
                    if (this.$route.path !== '/box1') {
                        this.$router.push('/box13');
                    } else {
                        if (confirm('再按一次退出应用')) {
                            plus.runtime.quit();
                        }
                    }
                });
            }
        },
        handlePlusReady() {
            this.setStatusBarDark()
        },
        setStatusBarDark() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('dark')
                    plus.navigator.setStatusBarBackground('#ffffff')
                } catch (e) { console.warn('Box14 setStatusBarDark failed', e) }
            }
        },
        restoreStatusBarDefault() {
            if (typeof plus !== 'undefined' && plus.navigator) {
                try {
                    plus.navigator.setStatusBarStyle('light')
                    plus.navigator.setStatusBarBackground('#00000000')
                } catch (e) { console.warn('Box14 restoreStatusBarDefault failed', e) }
            }
        }
    },
    beforeUnmount() {
        document.removeEventListener('plusready', this.handleBackButton);
        document.removeEventListener('plusready', this.handlePlusReady);
        this.restoreStatusBarDefault()
    }
}
</script>
<script setup>

import { ref } from 'vue'
import { useRouter } from 'vue-router'

// import wechat2 from '@/assets/img/12-other copy 3.jpg'
// import wechat1 from '@/assets/img/boxlihun.jpg'
import wechat1 from '@/assets/img/user/zhenjian.png'
// 岩

const check = ref(true)
const router = useRouter()

function btn() {
    check.value = !check.value
    console.log(111)
}
function goBack() {
    router.push('/box13')
}

// 滑动切换
let startX = 0, startY = 0

function handleTouchStart(e) {
    startX = e.touches[0].clientX
    startY = e.touches[0].clientY
}

function handleTouchEnd(e) {
    const endX = e.changedTouches[0].clientX
    const endY = e.changedTouches[0].clientY
    const deltaX = endX - startX
    const deltaY = endY - startY

    // 只有明显的水平滑动才认为是滑动，避免干扰点击
    if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
        if (deltaX > 0) {
            router.push('/box13')
        }
        // } else {
        //     router.push('/box1')
        // }
    }
}

// 摄像头（仅App端）

// defineOptions({ name: 'BoxThirteen' })
</script>

<style scoped lang="less">
.box {
    height: 100vh;
    overflow: hidden;
    background-color: #ffffff;
}

.image {
    width: 100vw;
    // transform: translateY(-20px);
}

.image-1 {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: rgb(249, 8, 8);
    /* 增加可见性用于调试 */
    opacity: 0;
    top: 62.5547px;
    left: 15px;
    z-index: 99;
    cursor: pointer;
    /* 增加鼠标指针 */
}
</style>